<template>
  <viewer>
    <slot></slot>
  </viewer>
</template>

<script>
import Vue from "vue";
import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
Vue.use(Viewer);
export default {
  props: {
    // 启用inline模式
    inline: {
      type: Boolean,
      default: false,
    },
    // 显示右上角关闭按钮
    button: {
      type: Boolean,
      default: true,
    },
    // 显示缩略图导航
    navbar: {
      type: Boolean | Number,
      default: false,
    },
    // 显示当前图片标题
    title: {
      type: Boolean | Number,
      default: true,
    },
    // 显示工具栏
    toolbar: {
      type: Boolean | Number,
      default: true,
    },
    // 显示缩放百分比
    tooltip: {
      type: Boolean,
      default: true,
    },
    // 图片是否可移动
    movable: {
      type: Boolean,
      default: true,
    },
    // 图片是否可缩放
    zoomable: {
      type: Boolean,
      default: true,
    },
    // 图片是否可旋转
    rotatable: {
      type: Boolean,
      default: true,
    },
    // 图片是否可翻转
    scalable: {
      type: Boolean,
      default: true,
    },
    // 是否开启过度效果
    transition: {
      type: Boolean,
      default: true,
    },
    // 是否全屏
    fullscreen: {
      type: Boolean,
      default: true,
    },
    // 是否支持键盘
    keyboard: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      Viewer.setDefaults({
        inline: this.inline,
        button: this.button,
        navbar: this.navbar,
        title: this.title,
        toolbar: this.toolbar,
        tooltip: this.tooltip,
        movable: this.movable,
        zoomable: this.zoomable,
        rotatable: this.rotatable,
        scalable: this.scalable,
        transition: this.transition,
        fullscreen: this.fullscreen,
        keyboard: this.keyboard,
      });
    },
  },
};
</script>
<style>
img {
  cursor: zoom-in;
}
</style>
